<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR展示</title>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-extras@7.1.0/dist/aframe-extras.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            background: black;
        }
        .a-canvas {
            width: 100vw !important;
            height: 100vh !important;
            display: block;
        }
    </style>
</head>
<body>
<a-scene
        vr-mode-ui="enabled: false"
        loading-screen="enabled: false"
        renderer="colorManagement: true; antialias: true; alpha: true;"
        background="color: black"
        xrweb>

    <!-- 相机配置 -->
    <a-entity id="rig" movement-controls="speed: 0.5">
        <a-entity camera
                  position="0 1.6 0"
                  look-controls="enabled: true"
                  wasd-controls="enabled: false"
                  cursor="rayOrigin: mouse; fuse: false"
                  raycaster="objects: .clickable; far: 30">
            <!-- 光标 -->
            <a-entity cursor="fuse: false"
                      position="0 0 -1"
                      geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                      material="color: #118A7E; shader: flat">
            </a-entity>
        </a-entity>
    </a-entity>

    <!-- 3D模型资源 -->
    <a-assets>
        <a-asset-item id="treeModel" src="./models/real3D.glb"></a-asset-item>
    </a-assets>

    <!-- 3D模型实体 -->
    <a-entity id="ar-model"
              gltf-model="#treeModel"
              position="0 1.5 -3"
              scale="1 1 1"
              rotation="0 0 0"
              animation="property: rotation; to: 0 360 0; loop: true; dur: 15000"
              shadow="cast: true; receive: true">
    </a-entity>

    <!-- 环境光照 -->
    <a-entity light="type: ambient; color: #FFFFFF; intensity: 0.7"></a-entity>
    <a-entity light="type: directional; color: #FFFFFF; intensity: 1.2"
              position="2 5 5" cast-shadow="true"></a-entity>
    <a-entity light="type: point; color: #FFFFFF; intensity: 0.8"
              position="0 3 2" cast-shadow="true"></a-entity>

    <!-- 地面参考 -->
    <a-entity geometry="primitive: plane; height: 10; width: 10"
              material="color: #333333; opacity: 0.3; shader: flat"
              position="0 0 -3"
              rotation="-90 0 0">
    </a-entity>

</a-scene>

<script>
    // 自动尝试进入AR模式
    const scene = document.querySelector('a-scene');

    scene.addEventListener('loaded', function() {
        // 延迟启动AR，确保场景完全加载
        setTimeout(() => {
            if (navigator.xr) {
                navigator.xr.isSessionSupported('immersive-ar').then(supported => {
                    if (supported) {
                        scene.enterAR().catch(err => {
                            console.log('自动AR启动失败，使用普通3D模式');
                        });
                    }
                });
            }
        }, 1000);
    });

    // 点击切换AR模式
    scene.addEventListener('click', function() {
        if (scene.is('ar-mode')) {
            scene.exitAR();
        } else {
            scene.enterAR().catch(err => {
                console.log('手动AR启动失败');
            });
        }
    });
</script>
</body>
</html>